<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>登录页面</title>
	<link href="images/favicon.svg" rel="icon" type="images/x-icon" />
	<link href="images/favicon.svg" rel="bookmark" type="images/x-icon" />
	<link rel="stylesheet" type="text/css" href="css/login.css">
	<script src="js/jquery.js"></script>
	<script src="js/ajax.js"></script>

</head>

<body>
	<div class="waveWrapper waveAnimation" style="opacity: 1;transition: all 3s; ">
		<div>
			<div class="login" id="loginleft" style="z-index: 100;">

			</div>
			<div class="login flag1" style="z-index: 100;">
				<div class="photo">
				</div>
				<span id="wenzi">账号登录
					<!--<p>Hello！欢迎使用！</p>-->
				</span>

				<div id="u" class="form-group">
					<input id="username" spellcheck=false class="form-control" name="username" type="text" size="18"
						alt="login" required="">
					<span class="form-highlight"></span>
					<span class="form-bar"></span>
					<label for="username" class="float-label">账号/邮箱/手机号</label>

				</div>
				<div id="p" class="form-group">
					<input id="password" class="form-control" spellcheck=false name="password" type="password" size="18"
						alt="login" required="">
					<span class="form-highlight"></span>
					<span class="form-bar"></span>
					<label for="password" class="float-label">密码</label>
				</div>
				<div class="form-group" id="anniu">
					<input type="checkbox" id="rem">
					<label for="rem" class="label" id="jizhu">记住密码</label>
					<label for="rem" class="label" id="wangji">忘记密码？</label>
					<button id="next" type="button">&nbsp;&nbsp;&nbsp;&nbsp;➜&nbsp;&nbsp;&nbsp;&nbsp;</button>
					<button id="fanhui"><img src="images/left.png" /></button>
					<button id="login" onClick="logins()" style="float:right;">登录</button>
					<a  class="label" id="register"  style="float:left;" href="#">注册</a>

				</div>

			</div>
		</div>


		<div class="waveWrapperInner bgTop">
			<div class="wave waveTop" style="background-image: url('images/wave-top.png')"></div>
		</div>
		<div class="waveWrapperInner bgMiddle">
			<div class="wave waveMiddle" style="background-image: url('images/wave-mid.png')"></div>
		</div>
		<div class="waveWrapperInner bgBottom">
			<div class="wave waveBottom" style="background-image: url('images/wave-bot.png')"></div>
		</div>
	</div>
	<script src="js/login.js"></script>
	<script>
		//登录
		function logins() {
			//#通过id .通过class
			var userName = $("#username").val();
			var password = $("#password").val();
			//json格式
			const jsonData = {
				userName: userName,
				pwd: password
			}
			//地址,数据，返回给我的
			ajax.post("/logins", jsonData, (data) => {
				console.log(data);
				if (data.data.length == 0) {
					alert("登录失败，请检查账号密码。");
				} else {
					//设置session
					sessionStorage.setItem("username",data.data[0].userName);
					//用户角色(0-普通,1-管理员)
					sessionStorage.setItem("role",data.data[0].role);
					// 登录成功,跳转到index.html
					window.location.href = "index.html";	
				}
			});
		}
		
	</script>
</body>

</html>